<template>
  <a-card :bordered="false">
    <a-form
      :form="form"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
      <a-form-item
        :label="__('类型')"
        :required="false"
      >
        <a-radio-group v-decorator="['type', { initialValue: row.type }]">
          <a-radio :value="1">{{ __('菜单') }}</a-radio>
          <a-radio :value="2">{{ __('节点') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="__('上级')">
        <a-select name="pid" option-label-prop="label" v-decorator="[ 'pid', { initialValue: row.pid } ]">
          <a-select-option v-for="resource in resources" :key="resource.id" :value="resource.id" :disabled="resource.disabled" :label="resource.name"> {{ resource.title }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="__('路由')">
        <a-input
          v-decorator="[
              'path',
              {
                initialValue: row.path,
                rules: [{ required: true, message: __('请输入路由') }]
              }
            ]"
          name="path"
          :placeholder="__('请输入路由(前端)')" />
      </a-form-item>
      <a-form-item :label="__('资源')">
        <a-input
          v-decorator="[
              'resource',
              {
                initialValue: row.resource,
                rules: [{ required: true, message: __('请输入资源') }]
              }
            ]"
          name="resource"
          :placeholder="__('请输入资源(后端)')" />
      </a-form-item>
      <a-form-item :label="__('标题')">
        <a-input
          v-decorator="[
              'title',
              {
                initialValue: row.title,
                rules: [{ required: true, message: __('请输入名称') }]
              }
            ]"
          name="name"
          :placeholder="__('请输入名称')" />
      </a-form-item>
      <a-form-item :label="__('图标')">
        <a-input
          v-decorator="[
              'icon',
              {
                initialValue: row.icon
              }
            ]">
          <a slot="addonAfter" @click="handleSelectIcon">{{__('选择图标')}}</a>
        </a-input>
      </a-form-item>
      <a-form-item :label="__('权重')">
        <a-input-number v-decorator="['weigh', { initialValue: row.weigh }]" :min="0" :max="100"/>
      </a-form-item>
      <a-form-item :label="__('备注')">
        <a-textarea
          rows="4"
          v-decorator="[
              'remark',
              { initialValue: row.remark }
            ]" />
      </a-form-item>
      <a-form-item :label="__('状态')">
        <a-radio-group v-decorator="['status', { initialValue: row.status }]">
          <a-radio :value="1">{{ __('正常') }}</a-radio>
          <a-radio :value="0">{{ __('隐藏') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 10, offset: 7 }">
        <a-button :loading="button.loading" :disabled="button.disabled" type="primary" @click="handleSubmit">{{ __('form.basic-form.form.submit') }}</a-button>
        <a-button style="margin-left: 8px" @click="handleReset">{{ __('重置') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import api from '@/api'
import YsUtils from '@/components/YS/Utils'
import IconSelector from '@/components/IconSelector'
export default {
  name: 'AdminResourceEdit',
  props: {
    dialogVm: {
      type: Object,
      default: null
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      button: {
        loading: false,
        disabled: false
      },
      resources: [
        { id: 0, pid: 0, name: this.__('无'), title: this.__('无'), disabled: false }
      ],
      row: {}
    }
  },
  mounted () {
    api.admin.resource.detail({
      id: this.id
    }).then(response => {
      this.row = response.data.data.row
      response.data.data.menus.forEach((menu) => {
        this.resources.push({
          id: menu.id,
          pid: menu.pid,
          name: menu.title,
          title: menu.name.toString().replaceAll('&nbsp;', '\u00a0'),
          disabled: menu.disabled
        })
      })
    })
  },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.button.loading = true
          this.button.disabled = true
          values['id'] = this.id
          api.admin.resource.edit(values).then(response => {
            this.button.loading = false
            this.button.disabled = false
            this.dialogVm.$emit('close')
            window.location.reload()
          }).catch(() => {
            this.button.loading = false
            this.button.disabled = false
          })
        }
      })
    },
    handleReset (e) {
      e.preventDefault()
      console.log(this.form.getFieldsValue())
      this.form.resetFields()
    },
    handleSelectIcon (e) {
      const vm = this
      YsUtils.dialog(vm, IconSelector, {
        on: {
          change (icon) {
            vm.row.icon = icon
          }
        }
      }, {
        title: this.__('选择图标')
      })
    }
  }
}
</script>
